@keyframes borderColorChange
/* 代码输入区框流水效果 */
{
    0% { border-image-source: linear-gradient(to right, #41e9e9,#578aef);}
    50% { border-image-source: linear-gradient(to right, #578aef, #41e9e9);}
    100% { border-image-source: linear-gradient(to right, #41e9e9, #578aef);}
}

@keyframes buttonBlinck{
/* 导航区按钮hover渐变效果 没用 */  
0% { background: linear-gradient(to right, #8f41e9, #578aef);}
50% { background: linear-gradient(to right, #578aef, #8f41e9);}
100% { background: linear-gradient(to right, #8f41e9, #578aef);}
    /* 0%{border-image-source: radial-gradient( circle  closest-side, #b4bee2 ,#5383e2  50%, #b4bee2 10%);}  
   
    100%{border-image-source: radial-gradient( circle farthest-side at center, #b4bee2,#5383e2 ,#5383e2);  } */
}
@keyframes snowDown{
    from{top:0px}
    to{top:100%}
}

@keyframes buttonRadial-gradient{
    /* 导航区按钮hover渐变效果 */  
    /* 0%{border-image-source: radial-gradient( circle  closest-side, #b4bee2 ,#5383e2  50%, #b4bee2 10%);}  
       
    100%{border-image-source: radial-gradient( circle farthest-side at center, #b4bee2,#5383e2 );  } */
    0%{filter: brightness(100%) ;}  
       
    100%{filter: brightness(120%)  drop-shadow(8px 8px 10px rgba(158, 206, 250, 90%));  }
    }
    
@keyframes showMdArea{
    /* showMdArea:before */
    0%{margin-left: 0% ;}  
    25%{margin-right: 0% ;}  
    50%{margin-right: 0% ;margin-bottom:0% ;}  
    75%{margin-left: 0% ;margin-bottom:0% ;} 
    100%{margin-left: 0% ;margin-top:0%;} 

}
#MDroot{
    width: 100vw;
    height: 100vh;
    /* background-color: aliceblue; */
    background-color: rgba(135, 206, 235, 0.2);
    background-repeat: repeat;

}
.snow{
    position: absolute;
    width: 2px;
    height: 2px;
    border: 1px solid snow;
    color: white;
    border-radius: 50%;
    filter: brightness(150%) blur(2px);
    /* box-shadow: 0px -2px 2px 1px white; */
    animation: snowDown 10s;
}
#showMdAreaP{
    position: relative;
    border:5px solid #1982cc;
}




#showMdAreaP::before{
    position: absolute;  
    top: -5px;
    left: 100%;
    content: '';
    height: 100%;
    width: 0%;
    border-top:5px solid rgb(34, 1, 65);
    border-bottom:5px solid rgb(34, 1, 65)
}

/* #showMdAreaP:after{
    position: absolute;  
    bottom:-5px;
    right:0px; 
    content: '';
    height: 0%;
    width: 20%;
    border-bottom:5px solid rgb(34, 1, 65);

}  */



#navigationList{
    margin-left: -10px;
}

.navigationListItem{
    width: 100px;
    /* min-height:'200vh'; 父级必须有明确的长度才会生效*/
    margin-left: 10px;
    background-color: rgba(152, 199, 196, 0.3);
    border-radius: 20%;
    cursor: pointer;
    border-color: white;
}

.navigationListItem:hover{
    /* background-image: radial-gradient( circle farthest-side at center, rgb(180, 190, 226),#578aef); */
    animation:buttonRadial-gradient 2s ; 
    animation-fill-mode :forwards ;
}
.navigationListItemChoice{
    position: absolute;
    width: 220px;
    
    display: none;
    flex-direction:column;
}

.historySpan{
    padding-top: 5px;
    padding-left: 5%;
    border-bottom: 1px grey solid;
    height: 5%;
    font-size: large;
    background: snow;
    font-weight: 900;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.row{
    display: flex;
    flex-direction:row;
}

.mask{
    left: 0%;
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
}



#showMdArea::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    
}
/* Track */
#showMdArea::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    border-radius: 8px;
    
}
/* Handle */
#showMdArea::-webkit-scrollbar-thumb {
    background: rgba(201, 201, 202, .5);
    border-radius: 8px;
}
/* Handle on hover */
#showMdArea::-webkit-scrollbar-thumb:hover {
    /* background: rgb(162, 162, 163); */
    background: rgba(201, 201, 202, .5);
    border-radius: 8px;
}


#showMdArea{
    position: absolute;
    right: 50px;
    font-size:'calc(20px + 1.5vw)' ;
    width: 45%;
    height: 90%;
    /* border:solid 10px; */
    border-image: linear-gradient(to right, #41e9e9, #578aef);
    border-image-slice: 1;
    overflow: scroll;
    border-radius: 10px;
    overflow-x: hidden;
    /* background-color: rgba(10, 10, 10, 0.1); */
    background-color: rgba(95, 109, 116, 0.2);
  
    
 
}

.historyArea{
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc( ( 100vh - 80vh ) / 2 );
    left: calc( ( 100vw - 60vw ) / 2 );
    width: 60%;
    height: 80%;
    border: 1px solid  grey ;
    border-radius: 5px;
    z-index: 1;
}

.strip{
    background:   white;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

.showHistory{
    width: 100%;
    height: 100%;
    background:   rgb(226, 235, 238);
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
}

.mdTextarea::-webkit-scrollbar {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    
}
/* Track */
.mdTextarea::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
    border-radius: 8px;
    
}
/* Handle */
.mdTextarea::-webkit-scrollbar-thumb {
    background: rgba(201, 201, 202, .5);
    border-radius: 8px;
}
/* Handle on hover */
.mdTextarea::-webkit-scrollbar-thumb:hover {
    /* background: rgb(162, 162, 163); */
    background: rgba(201, 201, 202, .5);
    border-radius: 8px;
}

.mdTextarea{
    margin-left: 10px;
    font-size: 35px;
    resize :none;
    width: 45%;
    height: 90vh;
    font-size:'calc(20px + 1.5vw)' ;
    border:#92caf0 solid 3px;
    border-radius: 10px;
    /* border-image-source: linear-gradient(to right, #8f41e9, #578aef);
    border-image-source: linear-gradient(to right, #41e9e9,#578aef);
    border-image-slice: 20;
    
    animation:borderColorChange 10s infinite */
}

.tableEidtor{
    padding-left: 5px;
    display: none;
    width: 100px;
    height: auto;
    background-image: linear-gradient(to right , #e6ffff,#cdd4e0);
    position: absolute;
    left: calc( ( 100vw - 400px ) / 2);
    top: calc( ( 100vh - 400px ) / 2);
    flex-direction:column;
    border: 1px grey solid;
    border-radius: 3px;
    z-index: 1;

}

.urlDiv{
    display: none;
    border: #5599FF 1px solid;
    background-image: linear-gradient(to right , #e6ffff,#cdd4e0);
    position: absolute;
    border-radius: 5px;
    width: 400px;
    left: calc( ( 100vw - 400px ) / 2);
    top: 45%;
    flex-direction: column;
    z-index: 1;
    
}

.showMdArea{
    word-wrap: break-word;
}

.urlText{
    width: 95%;
}